<link rel="stylesheet" href="../css/content.css" type="text/css" />

<script type="text/javascript">

	Ext.onReady(function(){
        $( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "../images/calendar.gif",
			buttonImageOnly: true,
			dateFormat: 'yy/mm/dd'		
		});

	});
	function limitText(limitField, limitCount, limitNum) {
		if (limitField.value.length > limitNum) {
			limitField.value = limitField.value.substring(0, limitNum);
		} else {
			limitCount.value = limitNum - limitField.value.length;
		}
	}
</script>
	<div id="wrapper">
		<form id="form" method="POST"  action="services/add_event.php" enctype="multipart/form-data">
			<fieldset>
				<legend>Form&nbsp;Add&nbsp;Event</legend>
				<table id="event-table">
				<tr>
					<td>Ngày</td>
					<td>
                        <input id="datepicker"  name="date" type="text" value="<?php echo date("Y/m/d"); ?>" readonly="true" />
					</td>
				</tr>
				<tr>
					<td>Buổi</td>
					<td><select name="group" id="group">
							<option value="0">Sáng</option>
							<option value="1" >Trưa</option>
							<option value="2" selected="sellected" >Chiều</option>
							<option value="3">Tối</option>
					</select></td>
				</tr>
				<tr>
					<td>Tên&nbsp;Sự&nbsp;Kiện</td>
					<td><input type="text"name="name_event" value="Sinh nhật" /></td>	
				</tr>
				<tr>
					<td>Logo</td>
					<td><input type="file" name="logo_event" value=""/></td>	
				</tr>
				<tr>
					<td style="padding-bottom: 170px;">Nội&nbsp;Dung</td>
					<td><textarea name="info" cols="40" rows="10" id="info" 
						onKeyDown="limitText(this.form.info,this.form.countdown,300);"
						onKeyUp="limitText(this.form.info,this.form.countdown,300);" maxlength="300" ></textarea>
					</td>
				</tr>
				<tr>
					<td colspan='2'>
						<div id="countdown">
							<font size="1">(Maximum characters: 300)<br>You have <input readonly type="text" name="countdown" size="3" value="300"> characters left.</font>
						</div>	
					</td>
				</tr>
				<tr>
					<td colspan='2'>
						<input class="button" type="submit" name="submit" value="Add Event" />
					</td>
				</tr>
				</table>
			</fieldset>
		</form>
	</div><!--end wrapper-->